<template>
	<view class="u-wrap">
		<template v-if="Object.keys(cateList).length">
			<view class="u-search-box">
				<u-search placeholder="搜索商品" v-model="keyword" @search="searchGoods" @custom="searchGoods"></u-search>
			</view>
			<view class="u-menu-wrap">
				<!-- 商品类别 -->
				<scroll-view scroll-y scroll-with-animation class="u-tab-view menu-scroll-view">
					<block v-for="(item,index) in cateList" :key="index">
						<view class="navTitle">{{item.name}}</view>
						<view @click="switchMenu(child.id)" v-for="(child,childIndex) in item.children" :key="childIndex" class="u-tab-item" :class="[child.id == current?'u-tab-item-active':'']">
							<text>{{child.name}}</text>
						</view>
					</block>
				</scroll-view>
				<!-- 商品列表 -->
				<scroll-view scroll-y class="right-box" :lower-threshold="30" @scrolltolower="getMore">
					<block v-if="!goodsList.length">
						<view class="loading">
							<u-empty mode="list" text="暂无商品"></u-empty>
						</view>
					</block>
					<view v-else class="page-view">
						<view class="class-item">
							<view class="item-container">
								<navigator class="thumb-box " v-for="(goods, index) in goodsList"
									:url="`/pages/goods/details?id=${goods.id}`" :key="index">
									<image class="item-menu-image"
										:src="goods.cover_url" mode="widthFix"></image>
									<view class="item-menu-name u-line-1">{{goods.title}}</view>
								</navigator>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</template>
		<template v-else>
			<view class="loading">
				<u-loading-icon text="加载中" textSize="18"></u-loading-icon>
			</view>
		</template>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keyword: '',
				scrollTop: 0, //左边类别默认的位置
				page:1,
				current:0,  //当前分类号
				cateList:[], //分类列表
				goodsList:[], //商品列表
				loadStatus:'loadMore', //表示还有更多的数据可以加载
			}
		},
		onLoad() {
			this.getData();
		},
		methods: {
			searchGoods(e) {
				console.log(e);
				console.log(this.keyword);
			},
			async getData() {
				// 参数准备
				const params = {
					title: this.keyword,
					page: this.page
				}
				// 判断是否有分类id
				if (this.current) params.category_id = this.current;
				let res = await uni.$u.http.get('/api/goods', {
					params: params
				});
				console.log(res);
				this.cateList = res.categories;
				this.goodsList = res.goods.data;
			},
			// 触底加载更多
			async getMore(e) {
				// 如果没有到底，就一直可以触发
				if (this.loadStatus !== "nomore") {
					this.page++;
					const params = {
						page: this.page,
						title: this.keyword
					}
					// 判断是否有分类id
					if (this.current) params.category_id = this.current;
					let res = await uni.$u.http.get('/api/goods', {
						params: params
					});
					console.log(res);
					this.goodsList.push(...res.goods.data);
					if (res.goods.data.length < 10) { //接口返回的数据，每页是10条。如果不足10条，则说明没有更多数据了
						this.loadStatus = "nomore";
						uni.$u.toast('暂无更多数据');
					}
				}
				else{
					uni.$u.toast('暂无更多数据');
				}
			},
			switchMenu(id){
				if (id == this.current) return;
				// 先初始化页数和加载状态
				this.current = id;
				this.page = 1;
				this.keyword = "";
				this.loadStatus = "loadMore";
				this.getData();
			},
			searchGoods() {
				// 先初始化页数和加载状态
				this.current = 0;
				this.page = 1;
				this.loadStatus = "loadMore";
				this.getData();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.u-wrap {
		/* #ifdef H5*/
		height: calc(100vh - var(--window-top) - 100rpx);
		/* #endif*/
		/* #ifndef H5*/
		height: 100vh;
		/* #endif*/
		display: flex;
		flex-direction: column;

		.loading {
			text-align: center;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}
	}

	.u-search-box {
		padding: 18rpx 30rpx;
	}

	.u-menu-wrap {
		flex: 1;
		display: flex;
		overflow: hidden;

		.navTitle {
			width: 100%;
			padding: 20rpx 0;
			font-weight: 550;
			background-color: #2979ff;
			color: #fff;
			overflow-wrap:break-word;
			text-align: center;
		}
	}

	.u-search-inner {
		background-color: rgb(234, 234, 234);
		border-radius: 100rpx;
		display: flex;
		align-items: center;
		padding: 10rpx 16rpx;
	}

	.u-search-text {
		font-size: 26rpx;
		color: $u-tips-color;
		margin-left: 10rpx;
	}

	.u-tab-view {
		width: 200rpx;
	}

	.u-tab-item {
		height: 110rpx;
		background: #f8f8f8;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 26rpx;
		color: #444;
		font-weight: 400;
		line-height: 1;
		border-bottom: 1px solid #ccc;
	}

	.u-tab-item-active {
		position: relative;
		color: #000;
		font-size: 30rpx;
		font-weight: 600;
		background: #fff;
	}

	.u-tab-item-active::before {
		content: "";
		position: absolute;
		border-left: 4px solid $u-type-primary;
		height: 32rpx;
		left: 0;
		top: 39rpx;
	}

	.right-box {
		background-color: rgb(250, 250, 250);
	}

	.page-view {
		padding: 16rpx;
	}

	.class-item {
		/* #ifdef H5*/
		height: 80vh;
		/* #endif*/
		/* #ifndef H5*/
		height: 90vh;
		/* #endif*/
		margin-bottom: 30rpx;
		background-color: #fff;
		padding: 16rpx;
		border-radius: 8rpx;
	}

	.item-title {
		font-size: 26rpx;
		color: $u-main-color;
		font-weight: bold;
	}

	.item-menu-name {
		font-weight: bold;
		font-size: 26rpx;
		color: $u-main-color;
		margin-bottom: 10rpx;
	}

	.item-container {
		display: flex;
		flex-wrap: wrap;
		/* justify-content: space-around; */
	}

	.thumb-box {
		width: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}

	.item-menu-image {
		width: 98%;
	}
</style>
